<template>
	<view>
		<view class="ShopRegistration">
			<image src="../../../../static/images/register_bg.png" mode="scaleToFill" class="bgImg"></image>
			<view class="register_log">
				<image src="../../../../static/images/register_log_03_03.png" mode="widthFix"></image>
			</view>
			<view class="register_form">
				<form>
					<view class="input_view">
						<view>
							<image src="../../../../static/images/register_log_03.png" mode="widthFix" class="register_icon"></image>
						</view>
						<view>
							<input type="number" placeholder="请输入手机号" placeholder-class="placeholder" v-model="phoneVal" @input="phone"></input>
						</view>
						<view>
							<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_phone" class="register_delete" @click="deletePhoneVal"></image>
						</view>
					</view>
					<view class="input_view">
						<view>
							<image src="../../../../static/images/register_log_06.png" mode="widthFix" class="register_icon"></image>
						</view>
						<view>
							<input type="number" placeholder="请输入验证码" placeholder-class="placeholder" v-model="codeVal"></input>
						</view>
						<view class="register_code">
							<button @click="getCode()" v-if="show_Code">获取验证码</button>
							<button v-if="!show_Code">{{count}} s</button>
						</view>
					</view>
					<view class="input_view">
						<view>
							<image src="../../../../static/images/register_log_08.png" mode="widthFix" class="register_icon"></image>
						</view>
						<view>
							<input type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="firstPasswordVal"  @input="firstPassword"></input>
						</view>
						<view>
							<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_firstPassword" class="register_delete" @click="deleteFirstPassword"></image>
						</view>
					</view>
					<view class="input_view">
						<view>
							<image src="../../../../static/images/register_log_10.png" mode="widthFix" class="register_icon"></image>
						</view>
						<view>
							<input type="password" placeholder="请确认密码" placeholder-class="placeholder" v-model="nextPasswordVal" @input="nextPassword"></input>
						</view>
						<view>
							<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_nextPassword" class="register_delete"  @click="deleteNextPassword"></image>
						</view>
					</view>
					<view class="input_view">
						<view>
							<image src="../../../../static/images/register_log_12.png" mode="widthFix" class="register_icon"></image>
						</view>
						<view>
							<input type="text" placeholder="请输入店铺名称" placeholder-class="placeholder" v-model="shopNameVal" @input="shopName"></input>
						</view>
						<view>
							<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_shopName" class="register_delete" @click="deleteShopNameVal"></image>
						</view>
					</view>
					<view class="register_button">
						<button @click="register">注册</button>
					</view>
					<view class="register_toLogin">
						<navigator url="../ShopLogin/ShopLogin" hover-class="none" open-type="redirect">已有账号，去登录？</navigator>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delete_phone:false,
				delete_firstPassword:false,
				delete_nextPassword:false,
				delete_shopName:false,
				phoneVal:"",
				codeVal:"",
				firstPasswordVal:"",
				nextPasswordVal:"",
				shopNameVal:"",
				show_Code:true,
				count: '',
				timer: null,
			}
		},
		methods: {
		  //监听input值变化，值不为空则出现清除input值的图片
		  phone(){
			  if(this.phoneVal!=""){
				  this.delete_phone=true
			  }else{
				  this.delete_phone=false
			  } 
		  },
		  firstPassword(){
			  if(this.firstPasswordVal!=""){
			  		this.delete_firstPassword=true
			  }else{
			  		this.delete_firstPassword=false
			  } 
		  },
		  nextPassword(){
			  if(this.nextPasswordVal!=""){
			  		this.delete_nextPassword=true
			  }else{
			  		this.delete_nextPassword=false
			  } 
		  },
		  shopName(){
			  if(this.shopNameVal!=""){
			  		this.delete_shopName=true
			  }else{
			  		this.delete_shopName=false
			  } 
		  },
		  //点击图片清除input值
		  deletePhoneVal(){
			  this.phoneVal="";
			  this.delete_phone=false;
		  },
		  deleteFirstPassword(){
			  this.firstPasswordVal="";
			  this.delete_firstPassword=false;
		  },
		  deleteNextPassword(){
			  this.nextPasswordVal="";
			  this.delete_nextPassword=false;
		  },
		  deleteShopNameVal(){
			  this.shopNameVal="";
			  this.delete_shopName=false;
		  },
		  //验证码60s函数
		  checkCode(){
		  		//手机号格式验证
				if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
				  uni.showToast({
					title:"手机号有误，请重新输入!",
					duration:2000,
					icon:"none"
				 })  
				  return false; 
				}
				const TIME_COUNT = 60;
				if (!this.timer) {
			       this.count = TIME_COUNT;
			       this.show_Code = false;
			       this.timer = setInterval(() => {
			       if (this.count > 0 && this.count <= TIME_COUNT) {
			             this.count--;
			       }else {
			             this.show_Code = true;
			             clearInterval(this.timer);
			             this.timer = null;
			       }
			      }, 1000)		
			  }else{
					uni.showToast({
					title:"手机号不得为空！",
					duration:2000,
					icon:"none"
				 })  
			  }
		  },
		  //验证码按钮点击函数
		  getCode(){
			 let that = this;
			 this.checkCode();
			 uni.request({
				 url: this.$store.state.URL + 'verify/verify_code/code',
				 data:{
				 	 mobile: this.phoneVal,
					 code_type: "register"
				 },
				 success(res){
					 uni.showToast({
					 	title:"验证码已发送",
					 	duration:1000,
					 	icon:"none",
					 	mask:true
					 })
					 console.log(res.data.msg);
				 }
			 })
		  },
		  //表单验证
		  checkForm(){
			   // 不为空
			  if(this.phoneVal==""){  //手机号
			  	 uni.showToast({
			  	 	title:"手机号不得为空！",
			  		duration:2000,
			  		icon:"none"
			  	 })  
			  }else{
			  		//手机号格式验证
			  		if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
			          uni.showToast({
			         	title:"手机号有误，请重新输入!",
			         	duration:2000,
			         	icon:"none"
			         })  
			          return false; 
			       } 
			  }
			  if(this.codeVal==""){  //验证码
			  		 uni.showToast({
			  			title:"验证码不得为空！",
			  			duration:2000,
			  			icon:"none"
			  		})  
			  }
			  if(this.firstPasswordVal=="" || this.nextPasswordVal==""){  //密码
			  		uni.showToast({
			  			title:"密码不得为空！",
			  			duration:2000,
			  			icon:"none"
			  		})  
			  }else{
			  		if(this.firstPasswordVal!==this.nextPasswordVal){
			  			uni.showToast({
			  				title:"密码与确认密码不一致，请重新输入！",
			  				duration:2000,
			  				icon:"none"
			  			}) 
			  		}
			  }
			  if(this.shopNameVal==""){  //店铺名称
			  		uni.showToast({
			  			title:"店铺名称不得为空！",
			  			duration:2000,
			  			icon:"none"
			  		})  
			  }
		  },
		  //注册按钮点击函数
		  register(){
				this.checkForm();
				let that = this;
				console.log(this.$store.state.token);
				uni.request({
						url: this.$store.state.URL + 'merchant/merchant/mini_merchant_register',
						data: {
							token: this.$store.state.token,
							adminAccount: this.phoneVal,
							code : this.codeVal,
							adminPassword: this.firstPasswordVal,
							adminPassword_confirm: this.nextPasswordVal,
							merchantName: this.shopNameVal
					},
					success(res) {
						if(res.data.status == 1){
							uni.showToast({
								title:"注册成功",
								duration:1000,
								icon:"none",
								mask:true
							})
							setTimeout(function(){
								uni.redirectTo({
									url:"../ShopLogin/ShopLogin"
								})
							},1000)
						}else{
							uni.showToast({
								title:res.data.msg,
								duration:1000,
								icon:"none",
								mask:true
							})
						}
						console.log(res.data);
					}
				})	  
		  },
		  //统计数据
		  statistical(){
		  	uni.request({
		  		url:this.$store.state.URL+"/user/user/mini_program_statistical_data",
		  		data:{
		  			token:this.$store.state.token,
		  			page_type:"merchant_register"
		  		},
		  		success(res) {
		  			console.log(res);
		  		}
		  	})
		  }
		},
		onLoad() {
          this.statistical();
		}
	}
</script>

<style>
 .bgImg{
	 position: absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
	 z-index: -1;
 }
 .register_log{
	 margin-top:6%;
	 margin-left:40%;
	 position:relative;
 }
 .register_log image{
	 width:151upx;
	 height:205upx;
 }
 .register_form{
	 margin-top:30upx;
	 width:90%;
	 height:auto;
	 margin:0 auto;
	 background:#fff;
	 text-align: center;
	 padding-bottom: 50upx;
	 border-radius: 30upx;
 }
 .input_view view:nth-of-type(2){
	 margin-left: 70upx;
 }
 .input_view{
	 height: 44upx;
/* 	 border-radius: 20%; */
     display: flex;
	 /* justify-content: flex-start; */
	 padding-top:50upx;
	 padding-bottom: 20upx;
	 margin:30upx 10%;
	 border-bottom: 1upx solid #cccccc;
 }
 .input_view .register_icon{
	 width:37upx;
	 height:37upx;
 }
 .input_view .register_delete{
	 width:44upx;
	 height:44upx;
 }
 .input_view input{
	 font-size: 28upx;
	 color: #333;
 }
 .register_code{
	 width:161upx;
	 height:50upx;
 }
 .register_code button{
	 font-size:24upx;
	 color:#fdfdfd;
	 background: #f294a6;
	 width:176upx;
	 height:50upx;
	 line-height: 50upx;
	 border-radius: 25upx;
 }
 .placeholder{
	 font-size: 28upx;
	 color:#999;
 }
 /* .input_view image{
	 display: inline-block;
 } */
 .register_button{
	 margin-top:30upx;
 }
 .register_button button{
	 font-size: 30upx;
	 color: #fff;
	 background:#f2526f;
	 width:544upx;
	 heihgt:83upx;
	 border-radius: 42upx;
 }
 .register_toLogin{
	 font-size:24upx;
	 color:#333;
	 margin-top:30upx ;
 }
</style>
